<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>

    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }

      /*
			 * 设置outer的样式
			 */
      #outer {
        /*设置宽和高*/
        width: 520px;
        height: 333px;
        /*居中*/
        margin: 50px auto;
        /*设置背景颜色*/
        background-color: greenyellow;
        /*设置padding*/
        padding: 10px 0;
        /*开启相对定位*/
        position: relative;
        /*裁剪溢出的内容*/
        overflow: hidden;
      }

      /*设置imgList*/
      #imgList {
        /*去除项目符号*/
        list-style: none;
        /*设置ul的宽度*/
        /*width: 2600px;*/
        /*开启绝对定位*/
        position: absolute;
        /*设置偏移量*/
        /*
				 * 每向左移动520px，就会显示到下一张图片
				 */
        left: 0px;
      }

      /*设置图片中的li*/
      #imgList li {
        /*设置浮动*/
        float: left;
        /*设置左右外边距*/
        margin: 0 10px;
      }

      /*设置导航按钮*/
      #navDiv {
        /*开启绝对定位*/
        position: absolute;
        /*设置位置*/
        bottom: 15px;
        /*设置left值
				 	outer宽度  520
				 	navDiv宽度 25*5 = 125
				 		520 - 125 = 395/2 = 197.5
				 * */
        /*left: 197px;*/
      }

      #navDiv a {
        /*设置超链接浮动*/
        float: left;
        /*设置超链接的宽和高*/
        width: 15px;
        height: 15px;
        /*设置背景颜色*/
        background-color: red;
        /*设置左右外边距*/
        margin: 0 5px;
        /*设置透明*/
        opacity: 0.5;
        /*兼容IE8透明*/
        filter: alpha(opacity=50);
      }

      /*设置鼠标移入的效果*/
      #navDiv a:hover {
        background-color: black;
      }
    </style>

    <!--引用工具-->
    <script type="text/javascript" src="js/tools.js"></script>
    <script type="text/javascript">
      window.onload = function () {
        //获取imgList
        var imgList = document.getElementById('imgList');
        //获取页面中所有的img标签
        var imgArr = document.getElementsByTagName('img');
        //设置imgList的宽度
        imgList.style.width = 520 * imgArr.length + 'px';

        /*设置导航按钮居中*/
        //获取navDiv
        var navDiv = document.getElementById('navDiv');
        //获取outer
        var outer = document.getElementById('outer');
        //设置navDiv的left值
        navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth) / 2 + 'px';

        //默认显示图片的索引
        var index = 0;
        //获取所有的a
        var allA = document.getElementsByTagName('a');
        //设置默认选中的效果
        allA[index].style.backgroundColor = 'black';

        /*
				 	点击超链接切换到指定的图片
				 		点击第一个超链接，显示第一个图片
				 		点击第二个超链接，显示第二个图片
				 * */

        //为所有的超链接都绑定单击响应函数
        for (var i = 0; i < allA.length; i++) {
          //为每一个超链接都添加一个num属性
          allA[i].num = i;

          //为超链接绑定单击响应函数
          allA[i].onclick = function () {
            //关闭自动切换的定时器
            clearInterval(timer);
            //获取点击超链接的索引,并将其设置为index
            index = this.num;

            //切换图片
            /*
             * 第一张  0 0
             * 第二张  1 -520
             * 第三张  2 -1040
             */
            //imgList.style.left = -520*index + "px";
            //设置选中的a
            setA();

            //使用move函数来切换图片
            move(imgList, 'left', -520 * index, 20, function () {
              //动画执行完毕，开启自动切换
              autoChange();
            });
          };
        }

        //开启自动切换图片
        autoChange();

        //创建一个方法用来设置选中的a
        function setA() {
          //判断当前索引是否是最后一张图片
          if (index >= imgArr.length - 1) {
            //则将index设置为0
            index = 0;

            //此时显示的最后一张图片，而最后一张图片和第一张是一摸一样
            //通过CSS将最后一张切换成第一张
            imgList.style.left = 0;
          }

          //遍历所有a，并将它们的背景颜色设置为红色
          for (var i = 0; i < allA.length; i++) {
            allA[i].style.backgroundColor = '';
          }

          //将选中的a设置为黑色
          allA[index].style.backgroundColor = 'black';
        }

        //定义一个自动切换的定时器的标识
        var timer;
        //创建一个函数，用来开启自动切换图片
        function autoChange() {
          //开启一个定时器，用来定时去切换图片
          timer = setInterval(function () {
            //使索引自增
            index++;

            //判断index的值
            index %= imgArr.length;

            //执行动画，切换图片
            move(imgList, 'left', -520 * index, 20, function () {
              //修改导航按钮
              setA();
            });
          }, 3000);
        }
      };
    </script>
  </head>
  <body>
    <!-- 创建一个外部的div，来作为大的容器 -->
    <div id="outer">
      <!-- 创建一个ul，用于放置图片 -->
      <ul id="imgList">
        <li><img src="img/1.jpg" /></li>
        <li><img src="img/2.jpg" /></li>
        <li><img src="img/3.jpg" /></li>
        <li><img src="img/4.jpg" /></li>
        <li><img src="img/5.jpg" /></li>
        <li><img src="img/1.jpg" /></li>
      </ul>
      <!--创建导航按钮-->
      <div id="navDiv">
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
      </div>
    </div>
  </body>
</html>
